<template>
  <div>
    <el-descriptions title="商品详细信息" :column="1">
      <el-descriptions-item label="图片"><img style="width: 200px;object-fit: cover;"
          :src="form1.img" /></el-descriptions-item>
      <el-descriptions-item label="品名">
        <el-tag size="small">{{ form1.name }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="产品类型">{{ form1.type1 }}</el-descriptions-item>
      <el-descriptions-item label="类型分类">{{ form1.type2 }}</el-descriptions-item>
      <el-descriptions-item label="价格">
        <el-tag size="small">{{ form1.jiage }}元</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="规格">{{ form1.guige }}</el-descriptions-item>
      <el-descriptions-item label="主料">{{ form1.zhuliao }}</el-descriptions-item>
      <el-descriptions-item label="标题">{{ form1.title }}</el-descriptions-item>
      <el-descriptions-item label="口感">{{ form1.kougan }}</el-descriptions-item>
      <el-descriptions-item label="适应人群">{{ form1.shiyingrenqun }}</el-descriptions-item>
      <el-descriptions-item label="存储条件">{{ form1.chucuntiaojian }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import httpApi from '@/myaxios';
export default {
  data() {
    return {

      form1: {
        img: "",
        id: "",
        name: "",
        type1: "",
        type2: "",
        jiage: '',
        title: "",
        guige: "",
        zhuliao: "",
        kougan: "",
        shiyingrenqun: "",
        chucuntiaojian: "",
      },
    };
  },
  methods: {
    //通过id查询产品详情
    init() {
      let id = parseInt(this.$route.params.id)
      httpApi.commodity.queryById({ id }).then(res => {

        this.form1 = res.data[0]
        // console.log(this.form1.type1);
      })
    }
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped></style>